HTMLImageElement.prototype.Intervals = {
	Intervals: [
		["min", 60, "1 hour", "MINUTE:1:MINUTE:5:MINUTE:5:0:%d.%m %R"],
		["min", 120, "2 hours", "MINUTE:2:MINUTE:10:MINUTE:10:0:%d.%m %R"],
		["hours", 6, "6 hours", "MINUTE:5:MINUTE:30:MINUTE:30:0:%d.%m %R"],
		["hours", 12, "12 hours", "MINUTE:10:HOUR:1:HOUR:1:0:%d.%m %R"],
		["hours", 24, "1 day", "MINUTE:30:HOUR:2:HOUR:2:0:%d.%m %R"],
		["hours", 48, "2 days", "HOUR:1:HOUR:6:HOUR:6:0:%d.%m %R"],
		["hours", 96, "4 days", "HOUR:2:HOUR:12:HOUR:12:0:%d.%m %R"],
		["hours", 168, "1 week", "HOUR:4:DAY:1:DAY:1:86400:%d.%m.%Y"],
		["hours", 336, "2 weeks", "HOUR:6:DAY:1:DAY:1:86400:%d.%m.%Y"],
		["days", 30, "1 month", "HOUR:8:DAY:2:DAY:2:0:%d.%m.%Y"],
		["days", 60, "2 months"],
		["months", 6, "6 months"],
		["months", 12, "1 year"],
	],
	Current:    0,
	SkewFactor: 3,
	StepsBack:  0,
}
HTMLImageElement.prototype.GraphTypes = {}
HTMLImageElement.prototype.GraphTypes.Preview = {
	Cache: true,
	Colours: {
		BACK:   "00000000",
		CANVAS: "00000000",
		SHADEA: "00000000",
		SHADEB: "00000000",
		GRID:   "FFFFFF66",
		MGRID:  "FFFFFFBB",
		FONT:   "DDDDDDFF",
		AXIS:   "DDDDDDFF",
		FRAME:  "00000000",
		ARROW:  "DDDDDDFF",
	},
	Fonts: {
		DEFAULT: "8:mono",
		TITLE:   "10:sans",
		AXIS:    "7:sans",
		UNIT:    "8:mono",
		LEGEND:  "7:mono",
	},
	Options: {
		end:            "now - 1 min",
		full_size_mode: true,
		slope_mode:     true,
		base:           1000,
	},
}
HTMLImageElement.prototype.GraphTypes.Examine = {
	NoRefresh: true,
	CustomX:   true,
	Colours: {
		BACK:   "00000000",
		CANVAS: "00000000",
		SHADEA: "00000000",
		SHADEB: "00000000",
		GRID:   "FFFFFF66",
		MGRID:  "FFFFFFBB",
		FONT:   "DDDDDDFF",
		AXIS:   "DDDDDDFF",
		FRAME:  "00000000",
		ARROW:  "00000000",
	},
	Fonts: {
		DEFAULT: "8:mono",
		TITLE:   "10:sans",
		AXIS:    "7:sans",
		UNIT:    "8:mono",
		LEGEND:  "7:mono",
	},
	Options: {
		full_size_mode:  true,
		slope_mode:      true,
		base:            1000,
	},
}
HTMLImageElement.prototype.RenderGraph = function (ExplicitEnd) {
	if (! window.JSON) return (FALSE)
	this.Graph.Options.width = this.offsetParent.clientWidth
	this.Graph.Options.height = this.offsetParent.clientHeight
	this.Graph.Options.start = 'end - ' + this.Intervals.Intervals [this.Intervals.Current][2]
	if (! ExplicitEnd) with (this.Intervals) {
		this.Graph.Options.end = 'now - ' + StepsBack * Intervals [Current][1] / SkewFactor + ' ' + Intervals [Current][0]
	}
//alert (JSON.stringify (this.Graph))
	if ('CustomX' in this.Graph) with (this.Intervals) if (Intervals [Current].length > 3) {
		this.Graph.Options.x = Intervals [Current][3]
	} else delete this.Graph.Options.x
	this.src = 'gengraph.php?json=' + encodeURIComponent (JSON.stringify (this.Graph)) + '&alt=' + encodeURIComponent (this.alt)
	this.Graph.Counter += 1
	if (window.CurEnd) CurEnd.value = this.Graph.Options.end
}

function RenderGraphs () {
	for (var i = 0; i < Images.length; i += 1) {
		if (! ('NoRefresh' in Images [i].Graph)) {
			Images [i].RenderGraph ()
		}
	}
}

function PlotElemToggle () {
	var Elem = this.id.substr (5)
	for (var i = 0; i < Images.length; i += 1) {
		if (Elem in Images [i].Graph.Plot) Images [i].Graph.Plot [Elem].Enabled = this.checked
		Images [i].RenderGraph ()
	}
}

function PlotElemName () {
	var Elem = this.parentNode.previousSibling.previousSibling.firstChild.id.substr (5)
	for (var i = 0; i < Images.length; i += 1) {
		if (Elem in Images [i].Graph.Plot) Images [i].Graph.Plot [Elem].name = this.value
		Images [i].RenderGraph ()
	}
}

function onLoad (Name, Obj) {
	for (var i = 0; i < Images.length; i += 1) if (Images [i].alt.length && Images [i].alt == Name) {
		// init
		Images [i].Graph = {}
		Images [i].Graph.Counter = 1
		// Apply template
		if (Images [i].hasAttribute ('type') && (Type = Images [i].getAttribute ('type')) in HTMLImageElement.prototype.GraphTypes) {
			for (var Field in HTMLImageElement.prototype.GraphTypes [Type]) {
				if (! (Field in Images [i].Graph)) Images [i].Graph [Field] = new Object
				for (Prop in HTMLImageElement.prototype.GraphTypes [Type][Field]) {
					Images [i].Graph [Field][Prop] = HTMLImageElement.prototype.GraphTypes [Type][Field][Prop]
				}
			}
		}
		// Apply actual data
		for (var Field in Obj) {
			if (! (Field in Images [i].Graph)) Images [i].Graph [Field] = new Object
			for (Prop in Obj [Field]) {
				Images [i].Graph [Field][Prop] = Obj [Field][Prop]
			}
		}
		// List plot elements
		if (window.Plot && Images [i].Graph.Plot) {
//			while (Plot.children.length) Plot.removeChild (Plot.children [0])
			for (var j in Images [i].Graph.Plot) if ('GPRINT' != Images [i].Graph.Plot [j].type && 'COMMENT' != Images [i].Graph.Plot [j].type) {
				Plot.appendChild (document.createElement ('tr'))
				Plot.lastChild.appendChild (document.createElement ('td'))
				Plot.lastChild.lastChild.appendChild (document.createElement ('input'))
				Plot.lastChild.lastChild.lastChild.type = 'checkbox'
				Plot.lastChild.lastChild.lastChild.id = 'plot_' + j
				Plot.lastChild.lastChild.lastChild.checked = true
				Plot.lastChild.lastChild.lastChild.onchange = PlotElemToggle
				Plot.lastChild.appendChild (document.createElement ('td'))
				Plot.lastChild.lastChild.style.color = '#' + Images [i].Graph.Plot [j].colour.substr (0, 6)
				with (Images [i].Graph.Plot [j]) if (colour.length >= 8) Plot.lastChild.lastChild.style.opacity = (parseInt (colour.substr (6, 2), 16) + 1) / 256
				Plot.lastChild.lastChild.appendChild (document.createElement ('label'))
				Plot.lastChild.lastChild.lastChild.htmlFor = 'plot_' + j
				Plot.lastChild.lastChild.lastChild.appendChild (document.createTextNode (j))
				Plot.lastChild.appendChild (document.createElement ('td'))
				Plot.lastChild.lastChild.appendChild (document.createElement ('input'))
				if ('name' in Images [i].Graph.Plot [j]) Plot.lastChild.lastChild.lastChild.value = Images [i].Graph.Plot [j].name
				Plot.lastChild.lastChild.lastChild.onchange = PlotElemName
			}
		}
		Images [i].RenderGraph ()
	}
}

for (i = 0; i < Images.length; i += 1) {
	Head.Load (Images [i].alt)
}
Refresh = window.setInterval (RenderGraphs, 19000)

if (window.Zoom) {
	for (var i = 0; i < HTMLImageElement.prototype.Intervals.Intervals.length; i += 1) {
		Zoom.appendChild (document.createElement ('option'))
		Zoom.lastChild.appendChild (document.createTextNode (HTMLImageElement.prototype.Intervals.Intervals [i][2]))
		Zoom.lastChild.value = i
	}
	Zoom.onchange = function () {
		HTMLImageElement.prototype.Intervals.Current = this.value
		for (var i = 0; i < Images.length; i += 1) Images [i].RenderGraph ()
	}
}

if (window.CurEnd) {
	CurEnd.onchange = function () {
		for (var i = 0; i < Images.length; i += 1) {
			Images [i].Graph.Options.end = this.value
			Images [i].RenderGraph (true)
		}
	}
}

if (window.Left) {
	Left.onclick = function () {
		for (var i = 0; i < Images.length; i += 1) {
			Images [i].Intervals.StepsBack += 1
			Images [i].RenderGraph ()
		}
	}
}

if (window.Right) {
	Right.onclick = function () {
		for (var i = 0; i < Images.length; i += 1) {
			if (Images [i].Intervals.StepsBack > 0) Images [i].Intervals.StepsBack -= 1
			Images [i].RenderGraph ()
		}
	}
}
